<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
	<title>万医</title>
	<link rel="stylesheet" href="../css/itemList.css">
</head>
<body>

<section class="listPage1">
	<div class="introduce">
		<h1>万医个人基因组<br>检测服务</h1>
		<div class="blank64"></div>
		<p>包括健康风险、性状与指标等<br>一次性了解超过100种项目</p>
	</div>	
	<a id="pageChange"></a>	
</section>
<section class="listPage2">
	<div class="blank28"></div>
	<div class="itemList">
		<div class="pageHead">
			<em>健康风险</em>
			<p>你可以选择5类你关心的项目，定制专属于你的个人基因组检测</p>
		</div>
		<ul class="itemlistShow1">
		</ul>
		<div class="blank28"></div>
		<div class="pageHead">
			<em>性状与指标</em>
		</div>
		<ul class="itemlistShow2">
		</ul>
		<div class="blank28"></div>
		<div class="pageHead">
			<em>运动与营养</em>
		</div>
		<ul class="itemlistShow3">
		</ul>
	</div>
	<div class="blank34"></div>
</section>
<script type="text/template" id="template1">
	<%_.each(_.keys(itemList),function(item){
		if(item.toString()=="性状"||item.toString()=="运动"||item.toString()=="营养"||item.toString()=="指标") return true;%>
	<li class="navItem itemSlide">
		<div class="itemDetail">
			<a class="navigation1 itemNav">
				<em><%=item%></em>
				<span class="rightShow">
					<i><%=_.keys(itemList[item]).length%>项</i>
					<i class="navAnimate"></i>
				</span>
			</a>
			<ul class='secondNav'>
				<%_.each(itemList[item], function(detail){%>
				<li class='navItem2'><i class="itemIcon"></i><%=detail%></li>
				<%});%>					
			</ul>
		</div>
	</li>
	<%});%>	
	</script>
<script type="text/template" id="template2">
	<%_.each(arrShow,function(item){%>
	<li class="navItem itemSlide">
		<div class="itemDetail">
			<a class="navigation1 itemNav">
				<em><%=item%></em>
				<span class="rightShow">
					<i><%=_.keys(itemList[item]).length%>项</i>
					<i class="navAnimate"></i>
				</span>
			</a>
			<ul class='secondNav'>
				<%_.each(itemList[item], function(detail){%>
				<li class='navItem2'><i class="itemIcon"></i><%=detail%></li>
				<%});%>					
			</ul>
		</div>
	</li>
	<%});%>	
</script>
 <script type="text/javascript" src="../lib/_list.js"></script>
 <script type="text/javascript" src="../lib/zepto.js"></script>
 <script type="text/javascript" src="../lib/_underscore.js"></script>
 <script type="text/javascript">
	function backShow(){
	    var backX=parseInt($(window).width());
	    var backY=parseInt($(window).height());
	    $('.listPage1').css({
	    	'background-size':backX+"px "+backY+"px",
			'height':backY+"px"});
	}
    backShow();
    $(window).resize(function(){
    	backShow();
    })
 	var tempHtml1 = _.template($("#template1").html())(itemList);
 	$(".itemList .itemlistShow1").html(tempHtml1);
	var arrShow=["性状","指标"];
	var tempHtml2 = _.template($("#template2").html())(arrShow);
	$(".itemList .itemlistShow2").html(tempHtml2);
	arrShow=["运动","营养"];
	tempHtml3 = _.template($("#template2").html())(arrShow);
	$(".itemList .itemlistShow3").html(tempHtml3);
	$('.itemlistShow1 .navItem').eq(0).addClass('noborder');
	$('.itemlistShow2 .navItem').eq(0).addClass('noborder');
	$('.itemlistShow3 .navItem').eq(0).addClass('noborder');
 </script>
 <script src='../lib/_require.js' data-main='../js/itemList.js'></script>
